import React from 'react';
import {
  Input,
  Divider,
  message,
  Form,
  Icon,
  Upload,
  Modal,
} from 'antd';
import PropTypes from 'prop-types';
import { getOwner } from '@/utils/authority';
import config from '../../../../config/web.config';
import SelectSupplier from './SelectSupplier';

class NormalForm extends React.Component {
  constructor(props) {
    super(props);
    props.saveInstance && props.saveInstance(this);
    this.state = {
      selectSupplierVisible: false,
    }
  }

  static propTypes  = {
    data: PropTypes.object,
    onSaveForm: PropTypes.func.isRequired,
    saveInstance: PropTypes.func.isRequired,
  }

  handleSubmit = (event) => {
    event && event.preventDefault();
    this.props.form.validateFields((err, values) => {
      const dealer = this.dealer;
      if (err || !dealer) {
        return false;
      }
      const { data, onSaveForm } = this.props;
      onSaveForm({
        dealer: dealer._id,
        price: values.price,
        num: values.num,
        // owner: getOwner(),
      });
    });
  }

  handleReset = () => {
    this.props.form.setFieldsValue({
      dealerName: "",
      price: "",
      num: ""
    });
    this.dealer = null;
  }

  handleSelectSupplier = () => {
    this.setState({
      selectSupplierVisible: true,
    });
  }

  handleCancelSelectSupplier = () => {
    this.setState({
      selectSupplierVisible: false,
    });
  }

  handleSelectSupplierSuccess = (dealer) => {
    this.handleCancelSelectSupplier();
    this.props.form.setFieldsValue({
      dealerName: dealer.suppliercompanyname
    })
    this.dealer = dealer;
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { selectSupplierVisible } = this.state;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const buttonItemLayout = {
      wrapperCol: { span: 14, offset: 6 },
    };
    const that = this;
    // console.log(files, '-----------')
    return (
      <div>
        <Form layout="horizontal">
          <Form.Item label='供应商' {...formItemLayout}>
            {
              getFieldDecorator('dealerName', {
                rules: [{ required: true, message: '请选择供应商' }],
              })(
                <Input placeholder="请选择供应商" addonAfter={
                  <div style={{cursor: 'pointer'}} onClick={this.handleSelectSupplier}>选择<Icon type="right" /></div>
                } />
              )
            }
          </Form.Item>
          <Form.Item label='采购价格' {...formItemLayout}>
            {
              getFieldDecorator('price', {
                rules: [
                  { required: true, message: '请输入采购价格' },
                  { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字最多两位小数' }
                ],
              })(
                <Input placeholder="请输入采购价格" />
              )
            }
          </Form.Item>
          <Form.Item label='采购数量' {...formItemLayout}>
            {
              getFieldDecorator('num', {
                rules: [{ pattern: /^\d+$/, message: '请输入整数' }],
              })(
                <Input placeholder="请输入采购数量" />
              )
            }
          </Form.Item>
        </Form>

        <Modal
          title="选择分类"
          visible={selectSupplierVisible}
          width={600}
          footer={null}
          onCancel={this.handleCancelSelectSupplier}
        >
          <SelectSupplier onSelect={this.handleSelectSupplierSuccess} />
        </Modal>
      </div>
    );
  }
}


export default Form.create()(NormalForm)